<template>
  <a-card :bordered="false" class="about-master-container">
    <title-name v-if="titleName" :title="titleName" />
    <BForm ref="bForm" :config="searchConfig" :form="useForm" />
  </a-card>
</template>
<script>

/*
2022-01-04
* 此文件，需要修改或者添加BForm请联系我（王念超），勿乱动。
* BForm有很多地方再使用，实在要改，应该copy出来一份，专门用于searchData
* */

export default {
  name: 'a' + Date.now(),
  components: {},
  props: {
    searchData: {
      type: Array,
      default: () => []
    },
    form: {
      type: Object,
      default: function() {
        return {}
      }
    },
    resetCb: {
      type: [Function, Object],
      default: function() {
        return {}
      }
    },
    isExpand: {
      type: Boolean,
      default: false
    },
    isShowReset: {
      // 是否显示重置按钮
      type: Boolean,
      default: true
    },
    titleName: {
      type: String,
      default: '搜索'
    }
  },
  data() {
    return {
      needFilterEmptyVal: true,
      expand: true,
      useForm: {},
      yearsOpen: false         //解决年份面板点击不关闭问题
    }
  },
  computed: {
    searchConfig() {
      let config = this.$clone(this.searchData).splice(0, 2)
      config.push({
        type: 'custom',
        label: 'label-hidden',
        render: () => {
          return (
            <div class="search-btn">
              <a-button type="primary" onClick={this.search.bind(this)}>搜索</a-button>
              {this.isShowReset && <a-button onClick={this.reset.bind(this)}>重置</a-button>}
              {
                this.searchData.length > 2 &&
                <a onClick={() => this.expand = !this.expand}>
                  <a-divider type="vertical" />
                  {this.expand ? '收起' : '展开'}
                  <a-icon type={this.expand ? 'up' : 'down'} />
                </a>
              }
            </div>
          )
        }
      })
      let next = this.$clone(this.searchData).splice(2)
      next.forEach(v => v.show = this.expand)
      config = config.concat(next)
      return [{ row: true, children: config }]
    }
  },
  watch: {
    isExpand: {
      immediate: true,
      handler(val) {
        this.expand = this.isExpand
      }
    }
  },
  created() {
    this.useForm = this.$clone(this.form)
  },
  mounted() {
  },
  methods: {
    search() {
      let tempForm = this.$clone(this.useForm)
      // 过滤为空的数据
      if (this.needFilterEmptyVal) {
        for (let key in tempForm) {
          if (
            tempForm[key] === undefined ||
            (!tempForm[key] && tempForm[key] !== false && tempForm[key] !== '' && tempForm[key] !== 0)
          ) {
            delete tempForm[key]
          }
          if (tempForm[key]) {
            //如果是数组
            if (typeof tempForm[key] === 'object' && !tempForm[key].length) {
              delete tempForm[key]
            }
          }
        }
      }

      //处理数据的方法
      this.processData(tempForm)

      this.$emit('search', tempForm)
    },
    processData(tempForm) {
      for (let item of this.searchData) {
        //若表单为日期或时间范围
        if (item.type === 'range-picker') {
          let andtRangeTimes = tempForm[item.value]
          if (item.attrs && item.attrs.rangeFormat && andtRangeTimes) {
            tempForm[item.attrs.rangeFormat[0]] = this.$dateFormat(andtRangeTimes[0], 'D')
            tempForm[item.attrs.rangeFormat[1]] = this.$dateFormat(andtRangeTimes[1], 'D')
          }
        }
      }
    },
    reset() {
      this.$refs.bForm.resetFields()
      this.resetCb(this.useForm)
      this.$emit('reset')
      this.search()
    }
  }
}
</script>
<style lang="less">
.search-btn {
  text-align: right;

  .ant-btn {
    margin-right: 8px;
  }
}

label[title="label-hidden"] {
  opacity: 0;
}
</style>
